<script lang="ts" setup>
import { computed, ref, useTemplateRef } from 'vue'
const props = defineProps<{
  name: string
  image: boolean
  defaultImg?: string
  hoverImg?: string
  id: string
}>()
const hover = ref<boolean>(false)
const id = ref<string>(props.id)
const activeId = 'un' + props.id
const currentImg = computed(() => {
  if (props.image) {
    return hover.value ? props.hoverImg : props.defaultImg
  }
})
const isActive = computed(() => id.value.startsWith('un'))
const emit = defineEmits(['register', 'change'])
emit('register', props.id)
const Active = () => {
  id.value = activeId
  emit('change', id.value)
}
const deActive = () => {
  id.value = props.id
  emit('change', id.value)
}
defineExpose({ Active, deActive })
</script>

<template>
  <el-dropdown-item :command="id" :class="{ 'menu-item--active': isActive }">
    <div class="menu-item" @mouseover="hover = true" @mouseout="hover = false">
      <img v-if="props.image" class="menu-item_icon" :src="currentImg" />
      <span>{{ name }}</span>
    </div>
  </el-dropdown-item>
</template>

<style scoped lang="scss">
.menu-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--xy-medium-text-color);
  padding: 5px 16px;
  img.menu-item_icon {
    width: 15px;
    height: 15px;
    margin-right: 10px;
  }
  &:hover {
    color: var(--xy-primary-color);
    background: var(--xy-primary-light-color) !important;
  }
}
.menu-item--active {
  background: var(--xy-primary-light-color);
  span {
    color: var(--xy-primary-color);
  }
}
</style>
